<template>
	<view class="pay-result">
		<!-- 支付结果展示 -->
		<view class="result-section">
			<image class="status-icon" :src="isSuccess ? '/static/icons/pay-success.png' : '/static/icons/pay-fail.png'"
				mode="aspectFit" />
			<text class="status-text">{{ statusText }}</text>
			<text class="order-amount">¥{{ orderAmount }}</text>
		</view>

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-item">
				<text class="label">订单编号</text>
				<text class="value">{{ orderId }}</text>
			</view>
			<view class="info-item">
				<text class="label">支付时间</text>
				<text class="value">{{ paySuccessTime || '暂无' }}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<button class="btn primary" @tap="goToOrderDetail">查看订单详情</button>
			<button class="btn secondary" @tap="goToHome">返回首页</button>
		</view>
	</view>
</template>

<script>
	import {
		queryPayResult,
		getOrder
	} from '@/api/order/order.js'

	export default {
		data() {
			return {
				orderId: '',
				orderStatus: '',
				orderAmount: 0,
				paySuccessTime: '',
				queryCount: 0,
				maxQueryCount: 6,
				queryTimer: null
			}
		},

		computed: {
			isSuccess() {
				return this.orderStatus === 'SUCCESS'
			},

			statusText() {
				const statusMap = {
					'SUCCESS': '支付成功',
					'REFUND': '已退款',
					'NOTPAY': '未支付',
					'CLOSED': '已关闭',
					'REVOKED': '已撤销',
					'USERPAYING': '支付中',
					'PAYERROR': '支付失败'
				}
				return statusMap[this.orderStatus] || '未知状态'
			}
		},

		onLoad(options) {
			this.orderId = options.orderId
			this.orderAmount = options.amount || 0
			this.startQueryPayResult()
		},

		onUnload() {
			// 清除定时器
			if (this.queryTimer) {
				clearTimeout(this.queryTimer)
			}
		},

		methods: {
			async startQueryPayResult() {
				try {
					const res = await queryPayResult(this.orderId)
					if (res.code === 200) {
						this.orderStatus = res.data.orderStatus
						this.paySuccessTime = res.data.paySuccessTime

						// 如果状态是最终状态，停止轮询
						if (['SUCCESS', 'REFUND', 'CLOSED', 'REVOKED', 'PAYERROR'].includes(this.orderStatus)) {
							return
						}
					}

					// 继续轮询
					this.queryCount++
					if (this.queryCount < this.maxQueryCount) {
						this.queryTimer = setTimeout(() => {
							this.startQueryPayResult()
						}, 2000)
					} else {
						this.orderStatus = 'PAYERROR' // 超时当作支付失败处理
					}
				} catch (error) {
					console.error('查询支付结果失败:', error)
					this.orderStatus = 'PAYERROR'
				}
			},

			goToOrderDetail() {
				uni.navigateTo({
					url: `/pages/order/detail?id=${this.orderId}`
				})
			},

			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay-result {
		min-height: 100vh;
		background: #fff;
		padding: 60rpx 30rpx;

		.result-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 60rpx 0;

			.status-icon {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 30rpx;
			}

			.status-text {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

			.order-amount {
				font-size: 48rpx;
				color: #ff6b35;
				font-weight: bold;
			}
		}

		.order-info {
			margin-top: 40rpx;

			.info-item {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #eee;

				.label {
					color: #666;
					font-size: 28rpx;
				}

				.value {
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		.bottom-btns {
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			gap: 30rpx;

			.btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;

				&.primary {
					background: #4CAF50;
					color: #fff;
				}

				&.secondary {
					background: #f5f5f5;
					color: #666;
				}
			}
		}
	}
</style>